/**
 * @功能描述: tabs标签页demo
 * @author: lzn
 * @date: 2022-09-30 09:10:11
 * @version: 1.0
 */
<script setup>
import { ref } from 'vue';
const  active = ref('1');
const datas = [
  {
    label: `Tab 1`,
    key: '1',
    children: `Content of Tab Pane 1`,
  },
  {
    label: `Tab 2`,
    key: '2',
    children: `Content of Tab Pane 2`,
  },
  {
    label: `Tab 3`,
    key: '3',
    children: `Content of Tab Pane 3`,
  },
]

function handleClick(key) {
  active.value = key;
}
</script>

<template>
  <div class="yw-tabs tabs-column">
    <div class="yw-tabs-nav">
      <div 
        class="yw-tabs-tab"
        :class="active === data.key && 'tabs-active'"
        v-for="data in datas"
        @click="handleClick(data.key)"
      >
        {{ data.label }}
      </div>
    </div>
    <div class="yw-tabs-content">
      <div 
        class="yw-tabs-tabpanel" 
        v-for="data in datas"  
        :class="active === data.key && 'tabpanel-active'"
      >
      {{ data.children }}
    </div>
    </div>
  </div>
</template>

<style scoped>

</style>